<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>绑定样式</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
      border: 5px solid red;
      background-color: pink;
    }

    .sad {
      background-color: green;
    }

    .normal {
      background-color: blue;
    }

    .ccc1 {
      font-size: 50px;
    }

    .ccc2 {
      border: 10px solid springgreen;
    }

    .ccc3 {
      background-color: tomato;
    }
  </style>

  <script src="../js/vue.js"></script>

</head>

<body>

  <!-- 
    绑定样式：
        1.class样式
            写法：class="xxx"
                xxx可以是字符串、对象、数组。
                字符串写法适用于：类名不确定，要动态获取。
                对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
                数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
        2.style样式
            :style="{fontSize：xxx}"其中xxx是动态值。
            :style="[a， b] "其中a、b是样式对象。
   -->

  <div id="root">
    <!-- 绑定class样式--字符串写法 适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    <br>

    <!-- 绑定class样式--数组写法 适用于：要绑定的样式个数不确定、名字也不确定 -->
    <div class="basic" :class="arr">{{name}}</div>
    <br>

    <!-- 绑定class样式--对象写法 适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <div class="basic" :class="classObjs">{{name}}</div>

    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div>

    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="[styleObj, styleObj2]">{{name}}</div>

    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div>

  </div>

  <script>
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'ccc',
        mood: 'normal',
        arr: ['ccc1', 'ccc2', 'ccc3'],
        classObjs: {
          ccc1: true,
          ccc2: true,
          ccc3: true
        },
        styleObj: {
          fontSize: '40px',
          color: 'red',

        },
        styleObj2: {
          backgroundColor: 'orange'
        },
        styleArr: [
          {
            fontSize: '40px',
            color: 'red',
          },
          {
            backgroundColor: 'orange'
          }
        ]
      },
      methods: {
        changeMood() {
          const arr = ['happy', 'sad', 'normal']
          const index = Math.floor(Math.random() * 3)
          console.log(index)
          this.mood = arr[index]
        }
      }
    })
  </script>
</body>

</html>